<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>服务中心 - 壹加壹农业服务平台</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        'primary-light': '#34d399',
                        secondary: '#06b6d4',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        success: '#10b981',
                        neutral: '#f9fafb',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-neutral">
    <div class="container-app">
        <!-- 顶部导航栏 -->
        <header class="bg-white sticky top-0 z-10 border-b border-gray-100 shadow-soft">
            <div class="px-4 py-3 flex items-center gap-3">
                <button onclick="window.history.back()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-arrow-left text-text-primary"></i>
                </button>
                <h1 class="text-base font-bold flex-1 text-text-primary">服务中心</h1>
                <button onclick="window.location.href='../index.html'" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-home text-text-primary"></i>
                </button>
            </div>
        </header>
        
        <main class="pb-20">
            <!-- 服务中心介绍 -->
            <section class="relative h-48 bg-gradient-to-br from-secondary via-primary to-primary-dark overflow-hidden">
                <div class="absolute inset-0 opacity-10">
                    <img src="../images/photo2.jpg" 
                         alt="服务背景" class="w-full h-full object-cover">
                </div>
                <div class="absolute inset-0 flex flex-col items-center justify-center text-white p-6">
                    <div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-md flex items-center justify-center mb-3 border-2 border-white/50">
                        <i class="fa fa-th-large text-3xl"></i>
                    </div>
                    <h1 class="text-xl font-bold mb-2">全方位农业服务</h1>
                    <p class="text-sm text-white/90 text-center">一站式解决农业生产经营需求</p>
                </div>
            </section>

            <!-- 服务统计 -->
            <section class="px-4 mt-6 mb-4">
                <div class="bg-white rounded-2xl p-4 shadow-large border border-gray-100">
                    <div class="grid grid-cols-4 gap-2">
                        <div class="text-center py-2">
                            <div class="text-xl font-bold text-primary mb-1">6+</div>
                            <div class="text-xs text-text-secondary">服务类别</div>
                        </div>
                        <div class="text-center py-2 border-l border-gray-100">
                            <div class="text-xl font-bold text-secondary mb-1">200+</div>
                            <div class="text-xs text-text-secondary">服务商家</div>
                        </div>
                        <div class="text-center py-2 border-l border-gray-100">
                            <div class="text-xl font-bold text-accent mb-1">1000+</div>
                            <div class="text-xs text-text-secondary">服务订单</div>
                        </div>
                        <div class="text-center py-2 border-l border-gray-100">
                            <div class="text-xl font-bold text-primary mb-1">99%</div>
                            <div class="text-xs text-text-secondary">好评率</div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 服务类别卡片 -->
            <section class="px-4">
                <div class="space-y-3">
                    <!-- 农机服务 -->
                    <div class="bg-white rounded-2xl shadow-soft border border-gray-100 overflow-hidden hover:shadow-medium transition-all cursor-pointer" onclick="window.location.href='service.html'">
                        <div class="relative h-40">
                            <img src="https://images.unsplash.com/photo-1625246333195-78d9c38ad449?w=600&h=400&fit=crop&q=90" 
                                 alt="农机服务" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                            <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                                <div class="flex items-center gap-2 mb-2">
                                    <div class="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/30">
                                        <i class="fa fa-tractor text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-base font-bold">农机服务</h3>
                                        <p class="text-xs text-white/90">耕地、播种、收割全流程</p>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3 text-xs">
                                        <span><i class="fa fa-store mr-1"></i>50+ 服务商</span>
                                        <span><i class="fa fa-check-circle mr-1"></i>已完成 320 单</span>
                                    </div>
                                    <span class="text-xs bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/30">
                                        查看详情 <i class="fa fa-arrow-right ml-1"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 金融贷款 -->
                    <div class="bg-white rounded-2xl shadow-soft border border-gray-100 overflow-hidden hover:shadow-medium transition-all cursor-pointer" onclick="window.location.href='service.html'">
                        <div class="relative h-40">
                            <img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?w=600&h=400&fit=crop&q=90" 
                                 alt="金融贷款" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                            <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                                <div class="flex items-center gap-2 mb-2">
                                    <div class="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/30">
                                        <i class="fa fa-dollar text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-base font-bold">金融贷款</h3>
                                        <p class="text-xs text-white/90">低息贷款，快速审批</p>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3 text-xs">
                                        <span><i class="fa fa-store mr-1"></i>15+ 金融机构</span>
                                        <span><i class="fa fa-check-circle mr-1"></i>已完成 180 单</span>
                                    </div>
                                    <span class="text-xs bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/30">
                                        查看详情 <i class="fa fa-arrow-right ml-1"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 物流代办 -->
                    <div class="bg-white rounded-2xl shadow-soft border border-gray-100 overflow-hidden hover:shadow-medium transition-all cursor-pointer" onclick="window.location.href='service.html'">
                        <div class="relative h-40">
                            <img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=600&h=400&fit=crop&q=90" 
                                 alt="物流代办" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                            <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                                <div class="flex items-center gap-2 mb-2">
                                    <div class="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/30">
                                        <i class="fa fa-truck text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-base font-bold">物流代办</h3>
                                        <p class="text-xs text-white/90">全程冷链，保鲜到达</p>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3 text-xs">
                                        <span><i class="fa fa-store mr-1"></i>30+ 物流公司</span>
                                        <span><i class="fa fa-check-circle mr-1"></i>已完成 250 单</span>
                                    </div>
                                    <span class="text-xs bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/30">
                                        查看详情 <i class="fa fa-arrow-right ml-1"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 劳务派遣 -->
                    <div class="bg-white rounded-2xl shadow-soft border border-gray-100 overflow-hidden hover:shadow-medium transition-all cursor-pointer" onclick="window.location.href='service.html'">
                        <div class="relative h-40">
                            <img src="https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=600&h=400&fit=crop&q=90" 
                                 alt="劳务派遣" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                            <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                                <div class="flex items-center gap-2 mb-2">
                                    <div class="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/30">
                                        <i class="fa fa-users text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-base font-bold">劳务派遣</h3>
                                        <p class="text-xs text-white/90">专业农工，经验丰富</p>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3 text-xs">
                                        <span><i class="fa fa-store mr-1"></i>25+ 劳务公司</span>
                                        <span><i class="fa fa-check-circle mr-1"></i>已完成 420 单</span>
                                    </div>
                                    <span class="text-xs bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/30">
                                        查看详情 <i class="fa fa-arrow-right ml-1"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 农产代销 -->
                    <div class="bg-white rounded-2xl shadow-soft border border-gray-100 overflow-hidden hover:shadow-medium transition-all cursor-pointer" onclick="window.location.href='service.html'">
                        <div class="relative h-40">
                            <img src="https://images.unsplash.com/photo-1593113598332-cd288d649433?w=600&h=400&fit=crop&q=90" 
                                 alt="农产代销" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                            <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                                <div class="flex items-center gap-2 mb-2">
                                    <div class="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/30">
                                        <i class="fa fa-shopping-cart text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-base font-bold">农产代销</h3>
                                        <p class="text-xs text-white/90">渠道广泛，销量保证</p>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3 text-xs">
                                        <span><i class="fa fa-store mr-1"></i>40+ 销售渠道</span>
                                        <span><i class="fa fa-check-circle mr-1"></i>已完成 280 单</span>
                                    </div>
                                    <span class="text-xs bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/30">
                                        查看详情 <i class="fa fa-arrow-right ml-1"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 办公场地 -->
                    <div class="bg-white rounded-2xl shadow-soft border border-gray-100 overflow-hidden hover:shadow-medium transition-all cursor-pointer" onclick="window.location.href='service.html'">
                        <div class="relative h-40">
                            <img src="https://images.unsplash.com/photo-1574943320219-553eb213f72d?w=600&h=400&fit=crop&q=90" 
                                 alt="办公场地" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                            <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                                <div class="flex items-center gap-2 mb-2">
                                    <div class="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/30">
                                        <i class="fa fa-building-o text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-base font-bold">办公场地</h3>
                                        <p class="text-xs text-white/90">现代化场所，配套齐全</p>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3 text-xs">
                                        <span><i class="fa fa-store mr-1"></i>20+ 优质场地</span>
                                        <span><i class="fa fa-check-circle mr-1"></i>已完成 95 单</span>
                                    </div>
                                    <span class="text-xs bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/30">
                                        查看详情 <i class="fa fa-arrow-right ml-1"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 成为服务商 -->
            <section class="px-4 pt-4 pb-4">
                <div class="bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10 rounded-2xl p-6 border border-primary/20">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 rounded-2xl gradient-primary mx-auto flex items-center justify-center mb-3">
                            <i class="fa fa-handshake text-white text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-bold text-text-primary mb-2">成为服务商</h3>
                        <p class="text-sm text-text-secondary">提供优质服务，共创美好未来</p>
                    </div>
                    <button class="w-full gradient-primary text-white py-3 rounded-xl font-medium text-sm hover:shadow-lg transition-all" onclick="window.location.href='publish-service.html'">
                        立即入驻 <i class="fa fa-arrow-right ml-1"></i>
                    </button>
                </div>
            </section>
        </main>
        
        <!-- 底部导航 -->
        <div id="bottom-nav"></div>
        <div id="publish-modal-container"></div>
    </div>
    
    <script src="../js/common.js"></script>
    <script src="../js/navigation.js"></script>
    <script src="../js/components.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Components.initComponents('service');
            CommonUtils.initButtonFeedback();
        });
    </script>
</body>
</html>

